<template>
	<view>
		<view class="wrap-status-bg flex">
			<block v-for="(item, index) in tab_list" :key="index">
				<view class="status-item flex align-center just-center" :class="item.status === status ? 'active': ''"
					@click.stop="onTab(item)">
					{{ item.title }}

					<image class="tab-line" v-if="item.status === status"
						:src="$staticImagePath('goods/tab_lines.png')" />
				</view>
			</block>
		</view>
		<view class="box" v-for="(item,index) in list">
			<view class="head">
				<view class="con">
					<view class="num">{{item.goods[0].title}}</view>
					<view class="state">待核销</view>
				</view>
				
				<view class="time" style="margin-top: 20rpx;">订单编号：{{item.order_no}}</view>
			</view>
			<view class="user-box">
				<view class="user">
					<block v-if="item.delivery_type=='express'">
						<view>{{item.address.name}} <text>{{item.address.mobile}}</text></view>
					</block>
					<block v-else>
						<view>联系电话：<text>{{item.address.mobile}}</text></view>
					</block>
					<image :src="url+'/applet/common/mobile.png'" mode="widthFix" @click="call(item.address.mobile)">
					</image>
				</view>
				<block v-if="item.delivery_type=='express'">
					<view class="address">
						<view @click="show(item.address)">{{item.distance}}km | 点击查看配送地址</view>
						<image :src="url+'/applet/common/right.png'" mode="widthFix"></image>
					</view>
					<view class="address">
						<view>{{item.remarks||'无'}} | {{item.goods_count}}种商品，共{{item.number}}件</view>
					</view>
				</block>
			</view>
			<view class="user-box" style="border: 0;margin-top: 0;margin-bottom: 0;padding: 0;"
				v-if="item.shop_state==4">
				<view class="user">
					<view>出餐完成</view>
				</view>
				<view class="address">
					<view>{{item.delivertime}} 完成出餐</view>
				</view>
			</view>
			<view class="user-box" v-if="item.shop_state==4&&item.express_type==1&&item.rider_status!='10'">
				<view class="user">
					<view>{{item.rider_name}}</view>
					<image :src="url+'/applet/common/mobile.png'" mode="widthFix" @click="call(item.rider_mobile)">
					</image>
				</view>
				<view class="address">
					<view>{{item.rider_jdtime}}骑手已取餐</view>
				</view>
			</view>
			<view class="details">
				<view class="mores" v-for="(detail,num) in item.goods">
					<view class="tname">{{detail.title}}</view>
					<view class="twos">
						<view class="tnum">x{{detail.number}}</view>
						<view class="tprice">￥{{detail.price}}</view>
					</view>
				</view>
				<view class="mores">
					<view class="tname">优惠</view>
					<view class="twos">
						<view class="tprice">-￥{{item.discount_price}}</view>
					</view>
				</view>
				<view class="mores">
					<view class="tname">小计</view>
					<view class="twos">
						<view class="tprice">￥{{item.actual_payment}}</view>
					</view>
				</view>
			</view>
			<block v-if="item.shop_state==2&&item.state==2">
				<block v-if="item.delivery_type=='express'">
					<view class="operate" @click="selectId(item.id)" v-if="item.shop_state==2">
						<!-- <view>退款</view> -->
						<picker @change="bindPickerChange" :value="index" :range="array">
							<view>立即接单</view>
						</picker>
					</view>
				</block>
				<block v-else>
					<view class="operate" v-if="item.shop_state==2">
						<view @click="jiedan(item.id)">立即接单</view>
					</view>
				</block>
			</block>



			<view class="operate" v-if="item.shop_state==6">
				<view @click="reject(item.id)">驳回</view>
				<view @click="agree(item.id)">同意</view>
			</view>
			<view class="operate" v-if="item.shop_state==4&&item.express_type==2">
				<view @click="deliver(item.id)">确认送达</view>
			</view>
			<view class="operatebox" v-if="item.shop_state==3">
				<view class="">
					<view class="t-titles">出餐时间倒计时：</view>
					<view class="t-nums">{{item.countdownText}}</view>
				</view>
				<view class="cz" @click="go(item.id)">出餐完成</view>
			</view>
			<view class="operatebox" v-if="item.shop_state==5" v-for="(cc,nn) in item.comment">
				<view class="">
					<view class="t-titles">用户评价
						<image
							:src="cc.score >= 1 ?common.appUrl.oss+common.imgList.sc5:common.appUrl.oss+common.imgList.sc6"
							mode="widthFix"></image>
						<image
							:src="cc.score >= 2 ?common.appUrl.oss+common.imgList.sc5:common.appUrl.oss+common.imgList.sc6"
							mode="widthFix"></image>
						<image
							:src="cc.score >= 3 ?common.appUrl.oss+common.imgList.sc5:common.appUrl.oss+common.imgList.sc6"
							mode="widthFix"></image>
						<image
							:src="cc.score >= 4 ?common.appUrl.oss+common.imgList.sc5:common.appUrl.oss+common.imgList.sc6"
							mode="widthFix"></image>
						<image
							:src="cc.score >= 5 ?common.appUrl.oss+common.imgList.sc5:common.appUrl.oss+common.imgList.sc6"
							mode="widthFix"></image>
					</view>
					<view class="t-nums">{{cc.content}}</view>
				</view>
				<view class="cz" @click="comment(cc.id)" v-if="!cc.reply">回复评价</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
	} from 'vuex';
	export default {
		computed: {
			...mapState(['common'])
		},
		data() {
			return {
				url: getApp().globalData.baseurl,
				tab_list: [{
						title: "待核销",
						status: "2"
					},
					{
						title: "已完成",
						status: "5"
					},
					{
						title: "待售后",
						status: "6"
					},
				],
				status: "2",
				page: 1,
				list: [],
				app: getApp().globalData,
				array: ['商家配送', '骑手配送'],
				index: 0,
				id: ''
			}
		},
		onLoad() {
			this.getList()
		},
		onUnload() {
			// 页面卸载时清除所有订单的定时器
			this.list.forEach(order => {
				if (order.timer !== null) {
					clearInterval(order.timer);
				}
			});
		},
		methods: {
			reject(id) {
				uni.showModal({
					title: '驳回原因',
					editable: true,
					placeholderText: '请输入',
					confirmText: '驳回',
					confirmColor: '#84BD00',
					success: (res) => {
						if (res.confirm) {
							this.app.post('/api/shop/check_refund', {
								id: id,
								status: 2,
								refuse_content: res.content
							}).then(res => {
								console.log(res)
								this.page = 1
								this.list = []
								this.getList()
							})
						}
					}
				});
			},
			agree(id) {
				this.app.post('/api/shop/check_refund', {
					id: id,
					status: 1,
					refuse_content: ''
				}).then(res => {
					console.log(res)
					this.page = 1
					this.list = []
					this.getList()
				})
			},
			deliver(id) {
				this.app.post('/api/shop/shop_wc', {
					id: id,
				}).then(res => {
					console.log(res)
					this.page = 1
					this.list = []
					this.getList()
				})
			},
			selectId(id) {
				this.id = id
			},
			show(address) {
				uni.showModal({
					title: '地址',
					content: address.address + address.address_name,
					showCancel: false,
					confirmText: '关闭',
					confirmColor: '#000000',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			call(tel) {
				uni.makePhoneCall({
					phoneNumber: tel
				});
			},
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e)
				this.index = e.detail.value
				this.app.post('/api/shop/shop_jiedan', {
					id: this.id,
					express_type: this.index == 0 ? 2 : 1,
				}).then(res => {
					console.log(res)
					this.page = 1
					this.list = []
					this.getList()
				})
			},
			jiedan(id) {
				this.app.post('/api/shop/shop_jiedan', {
					id: id,
					express_type: 0,
				}).then(res => {
					console.log(res)
					this.page = 1
					this.list = []
					this.getList()
				})
			},
			comment(id) {
				uni.showModal({
					title: '回复评论',
					editable: true,
					placeholderText: '请输入',
					confirmText: '回复',
					confirmColor: '#84BD00',
					success: (res) => {
						if (res.confirm) {
							this.app.post('/api/shop/reply_comment', {
								id: id,
								content: res.content
							}).then(res => {
								console.log(res)
								this.page = 1
								this.list = []
								this.getList()
							})
						}
					}
				});
			},
			go(id) {
				this.app.post('/api/shop/shop_chucan', {
					id: id,
				}).then(res => {
					console.log(res)
					this.page = 1
					this.list = []
					this.getList()
				})
			},
			getList() {
				this.app.post('/api/shop/order_list', {
					state: this.status,
					page: this.page,
				}).then(res => {
					console.log(res)
					this.list = this.list.concat(res.data)
					this.startAllCountdowns()
				})
			},
			startAllCountdowns() {
				this.list.forEach((order, index) => {
					// 初始化倒计时文本和timer属性
					if (!order.hasOwnProperty('countdownText')) {
						this.$set(order, 'countdownText', '00:00:00'); // 使用Vue的$set方法确保响应性
					}
					if (!order.hasOwnProperty('timer')) {
						this.$set(order, 'timer', null); // 初始化timer属性
					}

					this.updateCountdown(order);
					order.timer = setInterval(() => {
						if (this.updateCountdown(order)) {
							clearInterval(order.timer); // 如果倒计时结束，则清除定时器
						}
					}, 1000); // 每秒更新一次
				});
			},
			updateCountdown(order) {
				const now = Date.now(); // 当前时间戳
				const remainingTime = order.chucan_endtime * 1000 - now; // 剩余时间（毫秒）

				if (remainingTime <= 0) {
					// 倒计时结束
					order.countdownText = '00:00:00';
					console.log(`${order.name} 倒计时结束`);
					return true;
				}

				// 将剩余时间转换为时分秒
				const hours = Math.floor(remainingTime / (1000 * 60 * 60));
				const minutes = Math.floor((remainingTime % (1000 * 60 * 60)) / (1000 * 60));
				const seconds = Math.floor((remainingTime % (1000 * 60)) / 1000);

				// 格式化时间为两位数并更新订单的倒计时文本
				order.countdownText = `${this.padZero(hours)}:${this.padZero(minutes)}:${this.padZero(seconds)}`;
				return false;
			},
			padZero(num) {
				// 补零函数，确保数字始终是两位数
				return num < 10 ? `0${num}` : num;
			},
			onTab(item) {
				if (this.status === item.status) {
					return;
				}
				this.status = item.status;
				this.page = 1
				this.list = []
				this.getList()
			},
		}
	}
</script>

<style lang="scss">
	.wrap-status-bg {
		width: 100%;
		overflow: hidden;
		height: 100rpx;

		.status-item {
			flex: 1;
			overflow: hidden;
			font-size: 30rpx;
			color: #333333;
			position: relative;
		}

		.active {
			color: #84BD00 !important;
			font-weight: bold;
		}

		.tab-line {
			position: absolute;
			left: 50%;
			bottom: 10rpx;
			transform: translateX(-50%);
			width: 34rpx;
			height: 17rpx;
			overflow: hidden;
		}
	}

	.box {
		width: 690rpx;
		margin-left: 30rpx;
		background-color: #fff;
		border-radius: 20rpx;
		padding: 30rpx 0;
		margin-top: 30rpx;

		.head {
			width: 630rpx;
			margin-left: 30rpx;

			.con {
				width: 630rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.num {
					font-size: 36rpx;
					color: #3D3D3D;

					text {
						font-size: 30rpx;
					}
				}

				.state {
					font-size: 30rpx;
					color: #3D3D3D;
				}
			}

			.time {
				font-size: 24rpx;
				color: #3D3D3D;
			}
		}

		.user-box {
			width: 630rpx;
			margin-left: 30rpx;
			margin-top: 30rpx;
			margin-bottom: 30rpx;
			padding: 30rpx 0;
			border-top: 1px solid #eee;
			border-bottom: 1px solid #eee;

			.user {
				display: flex;
				justify-content: space-between;
				align-items: center;

				view {
					font-size: 30rpx;
					color: #3D3D3D;

					text {
						font-size: 24rpx;
						margin-left: 10rpx;
					}
				}

				image {
					width: 40rpx;
					height: 40rpx;
				}
			}

			.address {
				margin-top: 10rpx;
				display: flex;
				align-items: center;

				view {
					font-size: 24rpx;
					color: #999999;
				}

				image {
					width: 20rpx;
					height: 20rpx;
					margin-left: 10rpx;
				}
			}
		}

		.titles {
			width: 630rpx;
			margin-left: 30rpx;
			font-size: 30rpx;
			color: #3D3D3D;
			margin-top: 30rpx;
		}

		.details {
			width: 630rpx;
			margin-left: 30rpx;

			.mores {
				width: 630rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 30rpx;

				.tname {
					font-size: 26rpx;
					color: #333333;
				}

				.twos {
					display: flex;
					align-items: center;

					view {
						font-size: 26rpx;
						text-align: right;
						width: 150rpx;
						color: #333333;
					}
				}
			}
		}

		.operate {
			width: 630rpx;
			margin-left: 30rpx;
			border-top: 1px solid #eee;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			margin-top: 30rpx;
			padding-top: 30rpx;

			view {
				width: 150rpx;
				height: 60rpx;
				border-radius: 10rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				background: #FFFFFF;
				box-sizing: border-box;
				border: 1px solid #84BD00;
				font-size: 24rpx;
				color: #84BD00;
				margin-left: 30rpx;
			}
		}

		.operatebox {
			width: 630rpx;
			margin-left: 30rpx;
			border-top: 1px solid #eee;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 30rpx;
			padding-top: 30rpx;

			.t-titles {
				font-size: 30rpx;
				color: #3D3D3D;
				display: flex;
				align-items: center;

				image {
					width: 20rpx;
					height: 20rpx;
					margin-left: 10rpx;
				}
			}

			.t-nums {
				font-size: 24rpx;
				color: #3D3D3D;
			}

			.cz {
				width: 150rpx;
				height: 60rpx;
				border-radius: 10rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				background: #FFFFFF;
				box-sizing: border-box;
				border: 1px solid #84BD00;
				font-size: 24rpx;
				color: #84BD00;
				margin-left: 30rpx;
			}
		}
	}
</style>